<template>
  <div class="tags-container" ref="tagsContainer">
    <div class="tags-header">
      <slot name="icon"></slot>
      {{ props.title }}
    </div>
    <div class="tags-list">
      <template v-if="tagCount <= 9">
        <Tag v-for="i in tagCount" :key="i" :text="props.tagTexts[i-1] || '标签'" :is-selected="props.selectedTag === props.startIndex + i-1" @click="handleTagClick(props.startIndex + i-1)" />
      </template>
      <template v-else>
        <Tag v-for="i in 8" :key="i" :text="props.tagTexts[i-1] || '标签'" :is-selected="props.selectedTag === props.startIndex + i-1" @click="handleTagClick(props.startIndex + i-1)" />
        <div class="more-tag" @click="toggleMore" ref="moreButton" :data-showmore="showMore">
          更多
        </div>
      </template>
    </div>
    <!-- 更多标签弹出框 -->
    <div v-if="showMore && tagCount > 9" class="more-tags-popup">
      <div class="popup-tags">
        <Tag v-for="i in (tagCount - 8)" :key="i + 8" :text="props.tagTexts[i + 7] || '标签'" :is-selected="props.selectedTag === props.startIndex + i + 7" @click="handleTagClick(props.startIndex + i + 7)" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Tag from './Tag.vue';
import { Collection } from '@element-plus/icons-vue';

// 定义 props
const props = defineProps({
  tagCount: {
    type: Number,
    default: 9
  },
  selectedTag: {
    type: Number,
    default: null
  },
  startIndex: {
    type: Number,
    required: true,
  },
  title: {
    type: String,
    required: true
  },
  tagTexts: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['update:selected-tag']);

const handleTagClick = (globalIndex) => {
  emit('update:selected-tag', props.selectedTag === globalIndex ? null : globalIndex);
};

// 控制更多标签弹出框的显示
const showMore = ref(false);
const moreButton = ref(null);
const tagsContainer = ref(null);

// 切换更多标签弹出框
const toggleMore = () => {
  showMore.value = !showMore.value;
};

// 点击外部区域关闭弹出框
const handleClickOutside = (event) => {
  const popup = tagsContainer.value?.querySelector('.more-tags-popup');
  const moreButton = tagsContainer.value?.querySelector('.more-tag');
  if (popup && !popup.contains(event.target) && event.target !== moreButton) {
    showMore.value = false;
  }
};

// 组件挂载时添加事件监听器
onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

// 组件卸载时移除事件监听器
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.tags-container {
  border-radius: 8px;
  padding: 16px;
  max-width: 300px;
  position: relative;
}

.tags-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: white;
}

.tags-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  column-gap: 5px;
  row-gap: 5px;
}

.more-tag, .collapse-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black !important;
  border: none;
  border-radius: 24px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 24px;
}

.more-tag[data-showmore="true"] {
  background-color: red !important;
}

.more-tag:hover, .collapse-tag:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: red !important;
}

/* 更多标签弹出框样式 */
.more-tags-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 8px;
  padding: 12px;
  color: #333;
}



.popup-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}


</style>